
<!-- 个人中心页面 展示用户头像,用户iduserId,手机号userPhone,用户积分userPoints -->
<template>
  <div id="app">
    <div class="user-profile" >
      <el-row class="tac">
        <input class="searchMessage" placeholder="搜索"/>
        <div class="container" v-for="(message) in messageList" :key="message.userId">
          <MessageBox class="messageBox"
          :userId=message.userId
          :userName="message.userName"
          :message="message.message"
          :avatar="message.avatar"
          :numOfNewMessage="message.numOfNewMessage"
          @click.native="handleShowChat"
          />
          <Chat
          class="chat"
          v-show=false
          ref="chat"
          :userId=message.userId
          />
        </div>
      </el-row>
    </div>
  </div>

</template>

<script>
import MessageBox from './messageBox.vue'
import Chat from './chat.vue'
export default {
  components:{MessageBox,Chat },
  data() {
    return {
      messageList:[
          {
            userId:1,
            userName:"昨日机器A数据",
            message:"耗电数据：12.3,12.34,12.31....",
            avatar:"http://bittersweetyao.gitee.io/pic/pic/robot.jpg",
            numOfNewMessage:6,
          },
          {
            userId:2,
            userName:"设计迭代方案",
            message:"方案1设计如下:....",
            avatar:"http://bittersweetyao.gitee.io/pic/pic/save.jpg",
            numOfNewMessage:0,
          },
          {
            userId:3,
            userName:"昨日机器B数据",
            message:"数据监测,自动调整记录如下:....",
            avatar:"http://bittersweetyao.gitee.io/pic/pic/robot.jpg",
            numOfNewMessage:0,
          },
      ],
      manageMessageList:[
        {
            userId:4,
            userName:"项目1与项目2数据分析比对",
            message:"项目1数据如下",
            avatar:"http://bittersweetyao.gitee.io/pic/pic/robot.jpg",
            numOfNewMessage:6,
        }
      ]
      // dialogVisible: false
    }
  },
  created() {
    var permit=this.$store.state.who.who;
      if(permit=="manager")
      {
        this.messageList=this.manageMessageList;
      }
  },
  methods: {
    handleShowChat(e){
      console.log(this.$refs.chat)
      this.$refs.chat.forEach(ch => {
        ch.$el.style.display="none"
      });
      e.currentTarget.nextElementSibling.style="display:block";
    }
  }
}
</script>
<style scoped>
.clock{
  /*background-color: #005dba;*/
  border-radius: 10px;
  padding: 10px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}
.searchMessage{
  width: 90%;
  height: 30px;
  margin:5%;
  margin-bottom: 10px;
  margin-top: 10px;
  border: 1px solid #ddd;
  border-radius: 20px;
}
@media screen and (max-width:1000px) {
  .messageBox {
  max-width: 1000px;
  }
}
@media screen and (min-width:1000px) {
  .searchMessage{
    width: 40%;
    margin-left: 0%;
  }
  .messageBox {
    width: 40%;
    margin-left: 1%;
  }
}
</style>
